<template>
  <div id="app">
    <root>
      <div>
        <v-container class="mt-2 pa-3">
          <v-card class="pickingCard" height="160">
            <v-row class="ma-0 pa-3" style="height: 100%">
              <v-col cols="12" class="d-flex justify-space-between">
                <div
                  class="d-flex justify-space-between align-center"
                  style="width: 100%"
                >
                  <div class="pickingCard_title">CT-1001</div>
                  <div>
                    <v-btn
                      dark
                      x-small
                      depressed
                      color="#FFC352"
                      style="height: 22px"
                      >整箱拣货</v-btn
                    >
                  </div>
                </div>
              </v-col>
              <v-col cols="12">IM21102-918-123</v-col>
              <v-col cols="12">转子铁芯M721 </v-col>
              <v-col cols="12">W1201-120-11 </v-col>
              <v-col cols="12">100</v-col>
            </v-row>
          </v-card>
        </v-container>
        <v-container class="mt-2 py-2 px-0 pickingCard-bottom">
          <v-form
            v-model="pickingForm"
            ref="pickingForm"
            class="pickingForm"
            lazy-validation
          >
            <v-row class="pa-0">
              <v-col cols="12">
                <v-text-field
                  label="拣货容器"
                  placeholder="请输入或扫描拣货容器码"
                  :rules="rules.ctCodeRules"
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-text-field
                  label="目标容器"
                  placeholder="请输入或扫描目标容器码"
                  :rules="rules.targetCtCodeRules"
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-text-field
                  label="拣货数量"
                  placeholder="请输入需要拣货的数量"
                  :rules="rules.prePickQtyRules"
                ></v-text-field>
              </v-col>
            </v-row>
          </v-form>
        </v-container>
        <v-container style="font-size: 13px; color: #979899" class="py-1">
          提示：整箱拣货只需要扫描拣货容器；分箱拣货需要额外扫描目标容器及输入需要拣货的数量
        </v-container>
        <v-bottom-navigation
          height="60"
          fixed
          style="background: transparent; box-shadow: none"
        >
          <v-row
            class="pa-0 ma-0 justify-center"
            style="background: transparent"
          >
            <v-col
              cols="12"
              class="
                pa-0
                ma-0
                d-flex
                justify-space-between
                align-center
                mb-2
                px-2
                py-1
              "
              style="background: transparent"
            >
              <v-btn
                class="wms-submit-btn btn-left"
                color="#193690"
                dark
                outlined
                style="
                  height: 100%;
                  border-radius: 10px;
                  width: 30%;
                  color: #193690 !important;
                "
                >返回
              </v-btn>
              <v-btn
                class="wms-submit-btn"
                style="
                  background-color: #193690;
                  height: 100%;
                  border-radius: 10px;
                  width: 65%;
                "
                >提交</v-btn
              >
            </v-col>
          </v-row>
        </v-bottom-navigation>
      </div>
    </root>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
export default {
  components: { Root },
};
</script>

<style lang="scss" scoped>
.pickingCard-bottom {
  background-color: #fff;
  .col {
  }
}
</style>